<template>
  <div class="app-container BannerList">
    <div id="header" class="flex">
      <span class="headText">BANNER素材库</span>
      <el-button
        type="primary"
        icon="el-icon-refresh"
        size="mini"
        @click="$router.go(0)"
      >
        刷新
      </el-button>
    </div>
    <!--  筛选-->
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="110px"
          class="serach_contant"
        >
          <el-form-item label="banner名称：" prop="bannerName">
            <el-input
              v-model="queryParams.bannerName"
              placeholder="请输入banner名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="显示顺序：" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              placeholder="请输入显示顺序"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态：" prop="onSell">
            <el-select
              v-model="queryParams.onSell"
              placeholder="操作状态"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="展示时间：">
            <el-date-picker
              v-model="dateRange"
              size="small"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="datepickerChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              v-hasPermi="['gwoper:banner:query']"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- list -->
    <el-card>
      <div slot="header" class="clearfix">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="goNewbanner()"
          v-hasPermi="['gwoper:banner:add']"
        >
          新增Banner
        </el-button>
        <el-button
          type="primary"
          size="mini"
          style="float: right"
          @click="handleExport"
          v-hasPermi="['gwoper:banner:export']"
        >
          导出数据
        </el-button>
      </div>
      <div class="text item">
        <div class="changeBtn" v-if="allManage" style="margin-bottom: 33px">
          <!-- <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          > -->
          <div style="float: left">
            <span>全选：</span>
            <input
              type="checkbox"
              :checked="ids.length === bannerList.length"
              @click="checkedAll()"
            />
          </div>

          <el-button
            type="primary"
            size="mini"
            style="float: right; margin-left: 10px"
            @click="allMange"
            >完成管理</el-button
          >
          <el-button
            type="primary"
            size="mini"
            style="float: right"
            @click="batchIssue"
            v-hasPermi="['gwoper:banner:publishout']"
            >发布</el-button
          >
          <el-button
            type="primary"
            size="mini"
            style="float: right"
            @click="batchoffshelf"
            v-hasPermi="['gwoper:banner:publishout']"
            >下架</el-button
          >
          <el-button
            type="primary"
            size="mini"
            style="float: right"
            @click="batchDelete"
            v-hasPermi="['gwoper:banner:remove']"
            >删除</el-button
          >
          <el-button
            type="primary"
            size="mini"
            style="float: right"
            @click="batchPreview"
            >预览</el-button
          >
        </div>
        <div class="changeBtn" v-if="!allManage">
          <el-button
            type="primary"
            size="mini"
            style="float: right"
            @click="allMange"
            >批量管理</el-button
          >
        </div>
        <!-- banner -->
        <div class="banner flex">
          <!-- <el-checkbox-group
            v-model="checkbanner"
            @change="handleCheckedCitiesChange"
          > -->
          <el-row :gutter="24" style="padding: 0">
            <el-col
              :lg="8"
              :xl="6"
              :xs="24"
              v-for="(item, index) in bannerList"
              :key="index"
              @mouseenter.native="enterBanner(index)"
              @mouseleave.native="leaveBanner(index)"
            >
              <!-- <el-checkbox class="checklist" :label="item.id"> -->
              <input
                v-if="checkChange"
                type="checkbox"
                :checked="ids.indexOf(item.id) >= 0"
                name="checkboxinput"
                class="input-checkbox"
                @click="checkedOne(item.id, item.onSell, item.orderNo)"
              />
              <div class="checklist">
                <div class="banner_con">
                  <div class="banner_operate" v-show="show && n == index">
                    <!-- 编辑 删除 下架 -->
                    <i
                      class="el-icon-edit-outline aa"
                      style="color: black"
                      @click="handleEdit(item.id)"
                      v-hasPermi="['gwoper:banner:edit']"
                    ></i>
                    <i
                      v-if="item.onSell == 3 || 2"
                      class="el-icon-folder-delete aa"
                      style="color: black"
                      @click="handleDelete(item.id)"
                      v-hasPermi="['gwoper:banner:remove']"
                    ></i>
                    <i
                      v-if="item.onSell == 2"
                      class="el-icon-upload2 aa"
                      style="color: black"
                      @click="handleUpp(item.id, item.orderNo)"
                      v-hasPermi="['gwoper:banner:publishout']"
                    ></i>
                    <i
                      v-if="item.onSell == 1"
                      class="el-icon-download aa"
                      style="color: black"
                      @click="handleOut(item.id)"
                      v-hasPermi="['gwoper:banner:publishout']"
                    ></i>
                  </div>
                  <!-- 上下架状态-->
                  <!-- 三角形状态 -->
                  <div class="statusdown" v-if="item.onSell == 3"></div>
                  <div class="statusup" v-if="item.onSell == 1"></div>
                  <div class="statuswait" v-if="item.onSell == 2"></div>
                  <span class="hot" v-if="item.onSell == 3">下架</span>
                  <span class="hot" v-if="item.onSell == 1">上架</span>
                  <span class="hot" v-if="item.onSell == 2">待上架</span>
                  <div class="banner_top cc">
                    <div class="bannerimg">
                      <img :src="item.bannerUrl" alt="" />
                    </div>

                    <div class="banner_name flex">
                      <span>{{ item.bannerName }}</span>
                      <span>显示顺序：{{ item.orderNo }}</span>
                    </div>
                  </div>
                  <div class="lines"></div>
                  <div class="banner_num flex cc">
                    <span>点击量：{{ item.hitCounts }}</span>
                    <span>{{ item.showBeginTime }}-{{ item.showEndTime }}</span>
                  </div>
                </div>
              </div>
              <!-- </el-checkbox> -->
            </el-col>
          </el-row>
          <!-- </el-checkbox-group> -->
        </div>
      </div>
      <!-- 批量预览 -->
      <el-dialog :visible.sync="dialogVisible" style="width：500px">
        <el-carousel height="500px">
          <el-carousel-item v-for="(item, index) in uparr" :key="index">
            <img width="100%" height="100%" :src="item" alt="" />
          </el-carousel-item>
        </el-carousel>
      </el-dialog>
      <!-- 新增修改banner -->
      <!-- <add-bannere
        :goNewbannerFu="goNewbanner"
        :idFu="id"
        @closeAddBanner="closeAddBanner"
      ></add-banner> -->
      <!-- page -->
      <pagination
        :page-sizes="[12, 24]"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>


<script>
import { BannerList, DelBanner, updownBanner } from "@/api/gwoper/bannerList";
// import addBanner from "@/views/gwoper/banner/add/index";

export default {
  name: "bannerlist",
  // components: { addBanner },
  data() {
    return {
      id: null,
      // goNewbanner: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 选中数组的onsell值
      onSells: [],
      // 全选时onsell
      onsells: [],
      // 选中数组的排序值
      orderNos: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 类型数据字典
      typeOptions: [],
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        bannerName: null,
        orderNo: null,
        onSell: null,
        showBeginTime: null,
        showEndTime: null,
      },
      statusOptions: [],// banner上架状态列表
      //显示批量管理
      allManage: false,
      btnText: "批量管理",
      //删除banner
      delBanner: false,
      // bannerlist
      bannerList: [],
      checkList: true,
      // 多选
      checkAll: false,
      isIndeterminate: true,
      checkbanner: [],
      //鼠标悬浮图标出现
      n: 0,
      show: false,
      // 初始化全选按钮, 默认不选
      isCheckedAll: false,
      checkChange: false,

      // 预览的值
      dialogVisible: false,
      // arr: [],
      uparr: [],
      previewImg: [],
      // 所有上架的排序值list
      issuelist: [],
    };
  },
  created() {
    this.getDicts("gwoper_banner_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getList();
    // this.getissue()
  },
  methods: {
    //多选
    checkedOne(fruitId, on_sell, order_no) {
      // 点击多选触发筛选所有已经上架的banner的orderNo值
      this.getissue();
      // console.log(order_no)
      let idIndex = this.ids.indexOf(fruitId);
      let sellIndex = this.onSells.indexOf(on_sell);
      let ordernoIndex = this.orderNos.indexOf(order_no);
      if (idIndex >= 0) {
        // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
        this.ids.splice(idIndex, 1);
        this.onSells.splice(sellIndex, 1);
        this.orderNos.splice(ordernoIndex, 1);
      } else {
        // 选中该checkbox
        this.ids.push(fruitId);
        this.onSells.push(on_sell);
        this.orderNos.push(order_no);
        // console.log(this.onSells);
        // console.log(this.orderNos);
      }
    },
    checkedAll() {
      this.isCheckedAll = !this.isCheckedAll;
      if (this.isCheckedAll) {
        // 全选时
        this.ids = [];
        this.onsells = [];
        this.bannerList.map(function (item) {
          this.ids.push(item.id);
          // console.log(this.ids)
          this.onsells.push(item.onSell);
          // console.log(this.onsells);
        }, this);
      } else {
        this.ids = [];
        this.onsells = [];
      }
    },
    // 上下架
    uploadNews(ids, on_sell) {
      // console.log(ids);
      let title = "";
      if (on_sell == 1) {
        title = "上架";
      } else {
        title = "下架";
      }

      this.$confirm(`是否确认${title}id为${ids}的图文?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updownBanner(ids, on_sell).then((response) => {
            // console.log(response);
            if (response.code != 200) return this.msgError(response.msg);
            this.msgSuccess(response.msg);
            this.getList();
            this.ids = [];
            this.onSells=[];
            this.orderNos=[]
          });
        })
        .catch(() => {
          this.msgInfo(`取消${title}`);
        });
    },
    // 去新增banner
    goNewbanner() {
      this.$router.push({ path: "/gwoper/addBanner" });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // console.log(this.queryParams);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.dateRange = [];
      this.handleQuery();
    },
    // 筛选列表-展示时间
    datepickerChange(val) {
      // console.log(val);
      this.queryParams.showBeginTime = val[0];
      this.queryParams.showEndTime = val[1];
    },
    /** 查询bannerlist */
    getList() {
      this.loading = true;
      BannerList(this.queryParams)
        .then((response) => {
          // console.log(response, "bannerlist");
          this.bannerList = response.rows;
          // console.log(this.bannerList);
          this.total = response.total;
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    //批量管理
    allMange() {
      this.allManage = !this.allManage;
      this.checkChange = !this.checkChange;
      if (this.allManage == true) {
        this.btnText = "完成管理";
      } else if (this.allManage == false) {
        this.btnText = "批量管理";
      }
    },
    // 批量预览
    batchPreview() {
      let uparr = [];
      this.bannerList.map((item) => {
        if (item.onSell == 1) {
          return uparr.push(item.bannerUrl);
        }
      });
      this.uparr = uparr;
      // console.log(this.uparr)
      this.dialogVisible = true;
    },

    /** 修改单个banner */
    handleEdit(id) {
      // console.log(id,'1111');
      // this.goNewbanner = true;
      // this.id = id;
      this.$router.push({ path: "/gwoper/addBanner", query: { id: id } });
    },
    // 上架单个banner
    handleUpp(id, orderNo) {
      // console.log(orderNo);
      this.getissue();
      var c = this.issuelist.toString();
      // console.log(this.issuelist);
      if (c.includes(orderNo)) {
        return this.msgError(
          "此banner中和已上架的banner显示顺序有重复,请重新选择"
        );
      } else {
        this.uploadNews(id, 1);
      }
    },
    // 下架单个banner
    handleOut(id) {
      this.uploadNews(id, 3);
    },

    // 已上架的banner的排序值成数组
    getissue() {
      //  console.log(11111)
      let issuelist = [];
      this.bannerList.map((item) => {
        if (item.onSell == 1) {
          return issuelist.push(item.orderNo);
        }
      });
      this.issuelist = issuelist;
      // console.log(this.issuelist, "issuelist");
    },

    // 避免上架的banner和已上架的banner排序值重复
    compareOrderno() {
      // 所选择的待上架banner排序值不能有重复
      var nary = this.orderNos.sort();
      // console.log(nary, "8");
      if (nary == nary) {
        for (var i = 0; i < nary.length - 1; i++) {
          if (nary[i] == nary[i + 1]) {
            this.msgError("所选择的banner中显示顺序有重复,请重新选择");
            return true;
          }
        }
      }
      // 上架的banner和已上架的banner排序值重复
      var arr1 = this.orderNos;
      // console.log(arr1, "aa");
      var arr2 = this.issuelist;
      // console.log(arr2)
      for (var s in arr1) {
        for (var x in arr2) {
          if (arr1[s] == arr2[x]) {
            // arr3.push(arr1[s]);
            this.msgError(
              "所选择的banner中和已上架的banner显示顺序有重复,请重新选择"
            );
            return true;
          }
        }
      }
      return false;
    },
    // 批量上架
    batchIssue() {
      if (this.onSells.includes(1) || this.onSells.includes(3)) {
        return this.msgError("所选择的banner中有已上架或者已下架，请重新选择");
      } else if (this.onsells.includes(1) || this.onsells.includes(3)) {
        return this.msgError("全选的banner中有已上架或者已下架，请重新选择");
      } else {
        if (this.ids.length <= 0) {
          return this.msgInfo("请选择需要上架的banner");
        }
        if (this.compareOrderno()) return false;
        this.uploadNews(this.ids.join(","), 1);
      }
    },

    // 批量下架
    batchoffshelf() {
      console.log(this.onSells)
      if (this.onSells.includes(2) || this.onSells.includes(3)) {
        return this.msgError("所选择的banner中有待上架或者已下架，请重新选择");
      } else if (this.onsells.includes(2)) {
        return this.msgError("全选的banner中有已下架，请重新选择");
      } else {
        if (this.ids.length <= 0) {
          return this.msgInfo("请选择需要下架的banner");
        }
        this.uploadNews(this.ids.join(","), 3);
      }
    },

    // 删除单个bannner
    handleDelete(id) {
      const ids = id;
      this.$confirm(`是否确认删除id为${ids}banner`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DelBanner(ids).then((response) => {
            // console.log(response);
            if (response.code != 200) return this.msgError(response.msg);
            this.getList();
            this.ids = [];
            this.msgSuccess(response.msg);
          });
        })
        .catch(() => {
          this.msgInfo("取消删除");
        });
    },
    // 批量删除
    batchDelete() {
      // console.log(this.ids);
      if (this.ids.length <= 0) {
        return this.msgInfo("请选择需要删除的申请");
      }
      this.handleDelete(this.ids.join(","));
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "operation-center/banner/export",
        {
          ...this.queryParams,
        },
        `banner列表.xlsx`
      );
    },
    //鼠标悬浮出现隐藏
    enterBanner(index) {
      // console.log('鼠标移入');
      this.show = true;
      this.n = index;
    },
    leaveBanner(index) {
      // console.log('鼠标离开');
      this.show = false;
      this.n = index;
    },
  },
};
</script>
<style lang="scss" >
@import "@/assets/styles/card.scss";
.el-row {
  width: 100%;
}
// bannerlist图标的大小
.aa {
  font-size: 15px;
}
.line {
  border-bottom: 1px solid #e6ebf5;
  padding: 0 0 15px;
}
.lines {
  border-bottom: 3px solid #e6ebf5;
}

h4 {
  margin: 0 !important;
}
span {
  font-size: 4px;
}
.flex {
  display: flex;
}

.BannerList {
  .el-form-item__content {
    margin-left: 0px !important;
  }
  .btnHeader {
    justify-content: space-between;
    border-bottom: 1px solid #c0c4cc;
  }
  #header {
    justify-content: space-between;
    margin-bottom: 20px;
    .headText {
      font-size: 16px;
      color: #606266;
      padding-top: 8px;
    }
  }
  // search
  #search .serach_contant {
    margin-top: 20px;
  }
  //批量管理
  .allManage {
    justify-content: space-between;

    .btnManage {
      justify-content: flex-end;
    }
  }
  // Banner
  .el-checkbox-group {
    width: 100%;
  }
  .banner {
    padding: 0 !important;

    .checklist {
      margin: 0 0 20px 0;
      max-width: 450px;
      list-style: none;
      position: relative;
      width: 100%;

      span {
        font-size: 10px;
      }
      .banner_con {
        // border: 1px solid #c0c4cc;
        // margin: 8px 12px;
        // banner操作
        .banner_operate {
          position: absolute;
          z-index: 9999;
          right: 15px;
          top: 15px;
          background-color: #eeeff1;
          padding: 3px 12px;
          border-radius: 21px;
          margin: 5px 0;
          i {
            margin: 3px;
            cursor: pointer;
          }
        }
        // banner状态
        .statusup {
          width: 0;
          height: 0;
          border-top: 3rem solid rgb(53, 214, 53);
          border-right: 6.5rem solid transparent;
          position: absolute;
          z-index: 999;
        }
        .statusdown {
          width: 0;
          height: 0;
          border-top: 3rem solid rgb(243, 73, 73);
          border-right: 6.5rem solid transparent;
          position: absolute;
          z-index: 999;
        }
        .statuswait {
          width: 0;
          height: 0;
          border-top: 3rem solid #c0c4cc;
          border-right: 6.5rem solid transparent;
          position: absolute;
          z-index: 999;
        }
        .hot {
          position: absolute;
          z-index: 999;
          color: white;
          margin: 8px;
          // font-weight: 400;
        }
        .banner_top {
          // border-bottom: 3px solid #e5e6eb;
          padding-bottom: 5px;
          .bannerimg {
            img {
              width: 100%;
              height: 186px;
              margin-bottom: 15px;
            }
          }
          .banner_name {
            justify-content: space-between;
          }
        }

        .banner_num {
          justify-content: space-between;
          margin-top: 18px;
        }
        .banner_num :last-child {
          margin-top: 20px;
        }
      }
    }
  }
}
@media screen and(min-width: 1024px) and (max-width: 1920px) {
  .BannerList .banner .checklist .banner_con {
    .banner_operate {
      right: 14px;
      top: 7px;
      i {
        margin: 0 2px;
      }
    }
    .banner_top {
      img {
        height: 128px !important;
      }
    }
  }
}
@media screen and (min-width: 1920px) {
  .aa {
    font-size: 15px;
  }
  .checklist {
    .statusup {
      border-top: 4rem solid rgb(53, 214, 53) !important;
      border-right: 8rem solid transparent !important;
    }
    .statusdown {
      border-top: 4rem solid rgb(243, 73, 73) !important;
      border-right: 8rem solid transparent !important;
    }
    .statuswait {
      border-top: 4rem solid #c0c4cc !important;
      border-right: 8rem solid transparent !important;
    }
    span {
      font-size: 15px !important;
    }
    i {
      font-size: 23px;
      margin: 0 3px;
    }
    .banner_num {
      margin-top: 28px !important;
    }
    .hot {
      font-weight: 600;
      font-size: 19px;
    }
  }
}
</style>


